<template>
  <div class="mine">
    <header>
      <div class="header_bg">
        <div class="user">
          <p class="user-phone">18231156867</p>
          <p class="user-level">V0</p>
        </div>
      </div>
      <div class="header-bottom">
          <div class="header-bottom-l">
            <span>商品收藏</span>
          </div>
          <div class="split"></div>
          <div class="header-bottom-r">
            <span>店铺收藏</span>
          </div>
        </div>
    </header>
    <div class="line"></div>
    <div class="main">
        <div class="order-types">
            <ul>
              <li v-for = "name in type">{{ name }}</li>
              
            </ul>
        </div>
        <div class="order-types1">
            <ul>
              <li v-for = "name in types">{{ name }}</li>
            </ul>
        </div>
        <section class="logout">
          <router-link to="/user/login.html">退出当前账号</router-link>
        </section>
    </div>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      type: ['待付款', '待收货', '待评价', '退款/售后'],
      types: ['积分商城', '优惠券', '收货地址', '客服/反馈']
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
header{
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 66;
}
.header_bg{
  height: 2.7rem;
  background: #0093e7 url('../assets/a34.png') no-repeat 0.6rem .533rem;
  background-size: auto 2rem;
  padding-bottom: .533rem;
}
.user{
  padding: .3rem 0 0 3rem;
  font-size: .5rem;
  font-weight: 700;
  color: #fff;
}
.user-phone{
  line-height: 1.5rem; 
}
.user-level{
  color: #e64f1a;
  background: url('../assets/a35.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 150%;
  padding-left: .7rem;
  font-size: .4rem;
}
.header-bottom{
  width: 100%;
  background-color: #21719e;
  height: 1.12rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #fff;
  font-size: .43rem;
}
.split{
    width: 1px;
    height: 60%;
    background: #fff;
    -ms-flex-item-align: center;
    align-self: center; 
}
.header-bottom-l, header-bottom-r{
  height: 1.12rem; 
  line-height: 1.12rem; 
}
.header-bottom-l span{
  background: url('../assets/a37.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 100%;
  padding-left: .8rem;
}
.header-bottom-r span{
  background: url('../assets/a38.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 100%;
  padding-left: .8rem;
}
.line{
    width: 100%;
    height: 1rem;
}
.mine .main{
    position: absolute;
    top: 2.374rem;
    left: 0;
    right: 0;
    bottom: 0;
    background: #efefef;
}
.order-types{
    height: 2.27rem;
    background: #fff;
}
.order-types ul{
    height: 2.27rem;
    display: flex;    
    justify-content: space-around;
    margin-top: .3rem;
}
.order-types ul li{
    font-size: .38rem; 
}
.order-types ul li:first-of-type{
    background: url('../assets/a40.png');
    background-repeat: no-repeat;
    background-position: center 40%;
    background-size: auto 25%;
    padding-top: 1.5rem;
}
.order-types ul li:nth-of-type(2){
    background: url('../assets/a41.png');
    background-repeat: no-repeat;
    background-position: center 40%;
    background-size: auto 25%;
    padding-top: 1.5rem;
}
.order-types ul li:nth-of-type(3){
    background: url('../assets/a42.png');
    background-repeat: no-repeat;
    background-position: center 40%;
    background-size: auto 25%;
    padding-top: 1.5rem;
}
.order-types ul li:last-of-type{
    background: url('../assets/a43.png');
    background-repeat: no-repeat;
    background-position: center 40%;
    background-size: auto 25%;
    padding-top: 1.5rem;
}
.order-types1{
    height: 3.2rem;
    background: #fff;
}
.order-types1 ul{
    height: 3.2rem;
    display: flex;    
    justify-content: space-around;
    margin-top: .3rem;
}
.order-types1 ul li{
    font-size: .38rem; 
}
.order-types1 ul li:first-of-type{
    background: url('../assets/a44.png');
    background-repeat: no-repeat;
    background-position: center 40%;
    background-size: auto 25%;
    padding-top: 2rem;
}
.order-types1 ul li:nth-of-type(2){
    background: url('../assets/a45.png');
    background-repeat: no-repeat;
    background-position: center 40%;
    background-size: auto 25%;
    padding-top: 2rem;
}
.order-types1 ul li:nth-of-type(3){
    background: url('../assets/a46.png');
    background-repeat: no-repeat;
    background-position: center 40%;
    background-size: auto 25%;
    padding-top: 2rem;
}
.order-types1 ul li:last-of-type{
    background: url('../assets/a47.png');
    background-repeat: no-repeat;
    background-position: center 40%;
    background-size: auto 25%;
    padding-top: 2rem;
}
.logout{
    width: 100%;
    background-color: #fff;
    height: 1.44rem;
    line-height: 1.44rem;
    text-align: center;
    margin: 1rem 0;
    font-size: .38rem; 
    margin-bottom: 2rem;
}
</style>
